<template>
  <div class="dialogWrapper">
    <el-dialog center v-bind="$attrs" :visible.sync="dialogVisible" width="40%" v-on="$listeners">
      <CustomTabs v-model="tabActive" :custom-tabs-config="customTabsConfig" />
      <div class="list">
        <ul>
          <li v-for="(item, index) in 10" :key="index">
            <div class="liImage">
              <img :src="require('~/assets/images/1.png')" width="45" height="45" alt="avatar" />
              <div class="liInfo">
                <div class="name">CryptoCode</div>
                <div class="wallet">
                  <span>
                    {{
                    getAddress('0xd59E42897299f7856B46eD9cD77CDf9DB9cCB99e')
                    }}
                  </span>
                </div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'nuxt-property-decorator'
import CustomTabs from '../common/tabs.vue'
import { getOmittedAddress } from '~/utils/getOmittedAddress'
@Component({
  components: {
    CustomTabs,
  },
})
export default class MyFollowersAndFollowingAndInvitates extends Vue {
  @Prop({ type: String, default: '' })
  tabActive!: string

  dialogVisible = false

  customTabsConfig = {
    options: [
      {
        label: 'Followers',
        value: '1',
      },
      {
        label: 'Following',
        value: '2',
      },
      {
        label: 'Invitates',
        value: '3',
      },
    ],
  }

  getAddress(val: string) {
    return getOmittedAddress(val)
  }
}
</script>

<style lang="scss" scoped>
.dialogWrapper {
  ::v-deep .el-dialog {
    background-color: #2b3036;
    .el-dialog__header {
      .el-dialog__title {
        color: #fff;
      }
    }
  }
  ::v-deep .el-tabs {
    display: flex;
    justify-content: center;
  }
  .list {
    height: 400px;
    overflow-y: auto;
    padding: 50px;
    margin-top: 10px;
    ul {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      li {
        margin-bottom: 20px;
        .liImage {
          background-color: #0c0c11;
          padding: 20px;
          text-align: center;
          img {
            border-radius: 50%;
          }
        }
        .liInfo {
          padding-left: 10px;
          .name {
            color: #fff;
            padding-bottom: 5px;
          }
        }
      }
    }
  }
}
</style>
